<template>
  <acme-popup v-model="showPopup" :styles="{width: '630rpx', height: '805rpx', borderRadius: '16rpx'}"
    :clickOverlayClose="false"
  >
    <view class="top-wrap">
      <view class="title">恭喜您获得</view>
      <image class="icon" src="/static/popup/popup_icon2.png"></image>
    </view>
    <view class="bottom-wrap">
      <view class="brief">
        <text>将为您补上<text>3000元体验金</text>的奖励金额，感谢您为团队的付出！</text>
      </view>
      <view class="buttons">
        <view class="" @click="confirm">出借拿奖励</view>
        <view class="" @click="confirm">晒成就</view>
      </view>
    </view>
    
    <view class="iconfont cancel" @click="cancel">&#xe639;</view>
  </acme-popup>
</template>

<script>
  export default {
    props: {
      value: Boolean,
      exIndex: Number
    },
    watch: {
      value(show) {
        this.showPopup = show
      },
      showPopup(show) {
        if(!show) {
          this.closePopup()
        }
      }
    },
    data() {
      return {
        showPopup: false,
      }
    },
    methods: {
      closePopup() {
        this.$emit('input', false)
      },
      confirm() {
        if(this.exIndex === 1) {
          this.closePopup()
          this.$emit('receive')
        }else {
          this.$emit('share', '送你30天免费VIP，点击')
          this.closePopup()
        }
      },
      cancel() {
        this.closePopup()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .popup {
    text-align: center;
    
    
    .top-wrap {
      background-color: #95B143;
      border-radius: 16upx 16upx 0 0;
      overflow: hidden;
      
      .title {
        width: 400upx;
        margin: auto;
        display: block;
        line-height: 1;
        color: #fff;
        font-size: 36upx;
        margin-top: 60upx;
        position: relative;
        
        &::before {
          content: '';
          width: 80upx;
          height: 1px;
          background-color: #fff;
          transform: scaleY(0.5);
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto;
        }
        
        &::after {
          content: '';
          width: 80upx;
          height: 1px;
          background-color: #fff;
          transform: scaleY(0.5);
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
        }
      }
      
      .icon {
        width: 420upx;
        height: 350upx;
        display: block;
        margin: auto;
        margin-top: 39upx;
      }
    }
    
    .bottom-wrap {
      .brief {
        width: 528upx;
        color: #999;
        font-size: 28rpx;
        line-height: 38upx;
        text-align: center;
        margin: auto;
        margin-top: 40upx;
        text-align: center;
        
        text {
          text {
            color: #333;
            font-size: 40upx;
            margin: 0 6upx;
          }
        }
      }
      
      .buttons {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 40upx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        > view {
          width: 260upx;
          height: 80upx;
          line-height: 78upx;
          text-align: center;
          border-radius: 80upx;
          box-sizing: border-box;
          
          &:first-of-type {
            color: #1DC6B8;
            margin-right: 30upx;
            border: 1px solid #1DC6B8;
          }
          
          &:last-of-type {
            color: #fff;
            background-color: #1DC6B8;
          }
        }
      }
    }
    
    .cancel {
      width: 54upx;
      height: 54upx;
      line-height: 54upx;
      text-align: center;
      position: absolute;
      bottom: -90upx;
      left: 0;
      right: 0;
      margin: auto;
      color: #F7F7F7;
      font-weight: 500;
      border-radius: 50%;
      border: 2upx solid #F7F7F7;
    }
  }
</style>
